<template>
 <div class="box">
    <div class="header">
        <h2>乌克兰战争委员会</h2>
        <button @click="exit">退出登录</button>
    </div>
    <div class="main">
        <div class="nav">
            <ul>
                <li><router-link :to="{name:'one',query:{name:'first'}}">俄边境州遭“大量无人机袭击”</router-link></li><hr>
                <li><router-link :to="{name:'two',query:{id:2,name:'secound'}}">拜登：乌保证F-16战机不进俄领土</router-link></li><hr>
                <li><router-link :to="{name:'three',params:{id:3,name:'third'}}">卡德罗夫宣布向俄乌战区发兵</router-link></li><hr>
                <li><router-link :to="{name:'four',params:{id:4,name:'params4'},query:{names:'forth',font:'query'}}">俄媒：乌克兰最高将领在攻击中受重伤</router-link></li><hr>
            </ul>
        </div>
        <div class="text">
            <router-view></router-view>
        </div>
    </div>
    <div class="footer">
        <h4>乌克兰最高统帅部&乌克兰国家安全局共建</h4>
    </div>
 </div>
</template>
<script>
export default{
        data () {
                return {
                        aa:''
                }
        },
        created () {
           
        },
        mounted(){
            this.aa = this.$route.params.name
        },
        computed:{
        },
        methods:{
            exit(){
               this.$router.push({name:'login'}) 
            }
        }
}
</script>
<style lang='less'  scoped>
    .box{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
    }
    .header{
        width: 100%;
        height: 100px;
        background: #4371b9;
        display: flex;
        justify-content: space-around;
        h2{
            margin-left: 30px;
            line-height: 50px;
        }
        button{
            height: 30px;
            margin-top: 30px;
        }
        span{
            margin-top: 30px;
        }
    }
    .main{
        width: 100%;
        flex: 1;
        background: #ffff1b;
        display: flex;
        .nav{
            width: 40%;
            border: 2px solid #000;
            ul{padding: 0}
            li{
                list-style: none;
                width: 100%;
                margin: 10px;
            }
            a{
                text-decoration: none;
                color: #4371b9;
            }
        }
        .text{
            width: 60%;
            padding: 5px;
        }
    }
    .footer{
        width: 100%;
        height: 50px;
        background: #4371b9;
        h4{
            margin: 12px;
        }
    }
    .router-link-exact-active{
        background: #000;
    }
</style>
